<template>
	<div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>规则设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
		<div class="container">
            <div class="handle-box">
                <el-button type="warning" icon="el-icon-delete" class="handle-del mr10" @click="delCache" v-loading="cacheLoading">清除设置缓存</el-button>
            </div>
            <el-form :model="form" :rules="rules" label-width="80px">
                <el-form-item label="积分规则:">
                    <quill-editor class="ql-editor" ref="myQuillEditor" v-model="form.point_rules" :options="pointOption"></quill-editor>
                </el-form-item>
                <el-form-item label="报名协议:">
                    <quill-editor class="ql-editor" ref="myTextEditor" v-model="form.agreement" :options="agreementOption"></quill-editor>
                </el-form-item>
                <el-form-item label="商务合作:">
                    <quill-editor class="ql-editor" ref="myTextEditor" v-model="form.cooperation" :options="cooperationOption"></quill-editor>
                </el-form-item>
                <el-form-item>
                        <el-button type="primary" @click="submitData">提交</el-button>

                </el-form-item>
            </el-form>

		</div>


	</div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import {quillEditor} from "vue-quill-editor";
import {isEmpty} from "../../../api/http";
import {quillRedefine} from "vue-quill-editor-upload";
	export default {
		name: 'config',
		data() {
			return {
				title: '规则协议设置',
                form:{
                    point_rules:"",
                    agreement:"",
                    cooperation:"",
                },
                pointOption:'',
                agreementOption:'请输入报名协议',
                cooperationOption:"请输入商务合作内容",
                cacheLoading:false,
                uploadUrl:'',
			}
		},
        created() {
            this.uploadUrl = this.$api.imageUpload;
            this.getConfig();
            this.editorOption=quillRedefine({
                uploadConfig:{
                    action:this.uploadUrl,
                    name:'file',
                    res:(response)=>{
                        return response.data.url;
                    },
                    placeholder: "请输入积分规则",
                }
            });
            this.agreementOption=quillRedefine({
                uploadConfig:{
                    action:this.uploadUrl,
                    name:'file',
                    res:(response)=>{
                        return response.data.url;
                    },
                    placeholder: "请输入报名协议",
                }
            });
            this.cooperationOption=quillRedefine({
                uploadConfig:{
                    action:this.uploadUrl,
                    name:'file',
                    res:(response)=>{
                        return response.data.url;
                    },
                    placeholder: "请输入商务合作内容",
                }
            });
        },
        activated() {
		    this.getConfig()
		},
        components: {
            quillEditor,quillRedefine
        },

		methods: {
            delCache(){
                this.cacheLoading = true;
                this.$get(this.$api.delConfigCacheApi).then(res => {
                    this.cacheLoading = false;
                    if (res.code == 200) {
                        this.getConfig();
                        this.$message.success('清除成功！');
                    } else {
                        this.$message.error(res.msg);
                    }
                })

            },
		    getConfig(){
                this.$get(this.$api.configApi, {}).then((res) => {
                    if (res.code == 200) {
                         this.form.point_rules = res.data.point_rules;
                         this.form.agreement = res.data.agreement;
                         this.form.cooperation = res.data.cooperation;
                    } else {
                        return this.$message.error(res.msg);
                    }
                });

            },
            submitData(){
		        if(isEmpty(this.form.point_rules)){
		            return this.$message.error('请输入积分规则');
                }
                if(isEmpty(this.form.agreement)){
                    return this.$message.error('请输入报名协议');
                }
                if(isEmpty(this.form.cooperation)){
                    return this.$message.error('请输入商务合作内容');
                }
		        let params ={
                    point_rules: this.form.point_rules,
                    agreement: this.form.agreement,
                    cooperation: this.form.cooperation,
                }
                this.$post(this.$api.configApi, params).then((res) => {
                    if (res.code == 200) {
                        return this.$message.success('修改成功');
                    } else {
                        return this.$message.error(res.msg);
                        this.getConfig();
                    }
                });

            }
		}
	}
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
		display: flex;
		/* border: 1px solid red; */
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	/deep/ .isshow .el-upload--picture-card {
		display: none
	}
</style>
